<template>
    <div>
        <div class="login-wrap" v-show="showlogin">
            <h3>登陆</h3>
            <p v-show="showtishi">{{tishi}}</p>
            <input type="text" placeholder="请输入用户名" v-model="userName">
            <input type="password" placeholder="请输入密码" v-model="userPassword">
            <button @click="login">登陆</button>
            <span @click="ToRegister">没有账号？马上注册</span>
        </div>

        <div class="register-wrap" v-show="showregister">
            <h3>注册</h3>
            <p v-show="showtishi">{{tishi}}</p>
            <input type="text" placeholder="请输入用户名" v-model="newuserName">
            <input type="password" placeholder="请输入密码" v-model="newuserPassword">
            <button @click="register">登陆</button>
            <span @click="ToLogin">已有账号？马上登陆</span>
        </div>
    </div>
</template>

<script>
import { setCookie, getCookie } from '@/assets/js/cookie.js'
export default {
    name: 'login',
    data() {
        return {
            showlogin: true,
            showregister: false,
            showtishi: false,
            tishi: '',
            userName: '',
            userPassword: '',
            newuserName: '',
            newuserPassword: ''
        }
    },
    mounted() {
        if(getCookie('userName')){
            this.$router.push('/')
        }
    },
    methods: {
        login() {
            if(this.userName == '' || this.userPassword == ''){
                alert('请输入用户名或密码')
            }else{
                // let data = {
                //     'username': this.userName,
                //     'password': this.userPassword
                // }
                // this.$http.post('http://localhost/vueapi/index.php/Home/user/login', data)
                //     .then((res)=>{
                //         if(res.data == -1){
                //             this.tishi = '用户名不存在'
                //             this.showtishi = true
                //         }else if(res.data == 0){
                //             this.tishi = '密码错误'
                //             this.showtishi = true
                //         }else if(res.data == 'admin'){
                //             this.$router.push('/main')
                //         }else{
                //             this.tishi = '登陆成功'
                //             this.showtishi = true
                //             setCookie('username', this.userName ,1000*60)
                //             setTimeout(() => {
                //                 this.$router.push('/home')
                //             }, 1000);
                //         }
                //     })
                if(this.userName == getCookie('username') && this.userPassword == getCookie('password')){
                    this.tishi = '登陆成功'
                    this.showtishi = true
                    setCookie('username', this.userName ,1000*60)
                    setTimeout(() => {
                        this.$router.push('/home')
                    }, 1000);
                }else{
                    this.showtishi = true
                    this.tishi = '用户名或密码错误'
                }
            }
        },
        register() {
            if(this.newuserName == '' || this.newuserPassword == ''){
                alert('请输入用户名或密码')
            }else{
                // let data = {
                //     'username': this.newuserName,
                //     'password': this.newuserPassword
                // }
                // this.$http.post('http://localhost/vueapi/index.php/Home/user/register', data).then((res)=>{
                //     console.log(res)
                //     if(res.data == 'ok'){
                //         this.tishi = '注册成功'
                //         this.showtishi = true
                //         this.userName = ''
                //         this.userPassword = ''
                //         setTimeout(()=>{
                //             this.showregister = false
                //             this.showlogin = true
                //             this.showtishi = false
                //         },1000)
                //     }
                // })
                setCookie('username', this.newuserName)
                setCookie('password', this.newuserPassword)
                this.tishi = '注册成功'
                this.showtishi = true
                this.userName = ''
                this.userPassword = ''
                setTimeout(()=>{
                    this.showregister = false
                    this.showlogin = true
                    this.showtishi = false
                },1000)
            }
        },
        ToRegister() {
            this.showregister = true
            this.showlogin = false
            this.showtishi = false
            this.tishi = ''
        },
        ToLogin() {
            this.showregister = false
            this.showlogin = true
            this.showtishi = false
            this.tishi = ''
        }
    }
}
</script>

<style lang="stylus" scoped>
    .login-wrap
        text-align center
        h3
            font-size .32rem
            margin .3rem
        p
            color red
        input 
            display block
            box-sizing border-box
            padding .02rem .1rem
            margin .1rem auto
            border 1px solid #ccc
            border-radius .06rem
        button  
            display block
            margin .3rem auto
            line-height .8rem
            width 2rem
            border-radius .06rem
            background #41b883
            color #fff
    .register-wrap
        text-align center
        h3
            font-size .32rem
            margin .3rem
        p
            color red
        input 
            display block
            box-sizing border-box
            padding .02rem .1rem
            margin .1rem auto
            border 1px solid #ccc
            border-radius .06rem
        button  
            display block
            margin .3rem auto
            line-height .8rem
            width 2rem
            border-radius .06rem
            background #41b883
            color #fff
</style>
